<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-width="110px"
          >
            <el-form-item class="right">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addBut"
              >新增</el-button>
            </el-form-item>

            <el-form-item class="right">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
              >搜索</el-button>
            </el-form-item>
            <el-form-item class="right">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名搜索"
                clearable
                size="small"
                style="width: 240px"
              />
            </el-form-item>
          </el-form>

          <el-table v-loading="loading" :data="userList" border>
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="60px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="用户名"
              align="center"
              prop="userName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="最后登录时间"
              align="center"
              prop="createdAt"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.updateTm) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="最后登录IP"
              align="center"
              prop="lastLoginIp"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="角色"
              align="center"
              prop="rolesStr"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="添加时间" align="center" prop="createdAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTm) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="220"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="updateBut(scope.row)"
                >修改</el-button>
                <el-button
                  v-show="scope.row.status == 1"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteItem(scope.row.id)"
                >禁用</el-button>
                <el-button
                  v-show="scope.row.status == 0"
                  type="text"
                  @click="userEnable(scope.row.id)"
                >启用</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-dialog
            :title="winType == 1 ? '添加系统用户' : '修改系统用户'"
            :visible.sync="dialogFormVisible"
          >
            <el-form :model="addUser">
              <el-form-item label="用户名：" label-width="120px">
                <el-input
                  v-model="addUser.userName"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="角色：" label-width="120px">
                <el-select v-model="addUser.roleId" placeholder="请选择角色">
                  <!-- <el-option label="区域一" value="shanghai"></el-option> -->
                  <el-option
                    v-for="(item, index) of rolesData"
                    :key="index"
                    :label="item.roleName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                v-if="winType == 1"
                type="primary"
                @click="addSystemUser"
              >保 存</el-button>
              <el-button
                v-if="winType == 2"
                type="primary"
                @click="updateSystemUser"
              >保 存</el-button>
            </div>
          </el-dialog>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getList"
          />
          <!-- </el-col> -->
        </el-row>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import {
  addSystemUser,
  searchUserInfo,
  updateSystemUser,
  getAllRoles,
  userDisable,
  userEnable
} from '@/api/user-system';

export default {
  name: 'User',
  data() {
    return {
      // 遮罩层
      loading: !true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      dialogFormVisible: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        userName: ''
      },
      addUser: {
        userName: '',
        roleId: ''
      },
      rolesData: [],
      winType: 1 // 1添加，2修改
    };
  },
  watch: {},
  created() {
    this.getList();
    this.getAllRoles();
    // console.log(this.$store.state.user.newRoutes);
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      searchUserInfo(this.queryParams).then((response) => {
        this.userList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 查询角色列表 */
    getAllRoles() {
      getAllRoles().then((res) => {
        this.rolesData = res.data;
      });
    },

    /** 添加 */
    addSystemUser() {
      if (!this.addUser.userName) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        });
        return;
      } else if (!this.addUser.roleId) {
        this.$message({
          message: '请选择角色',
          type: 'warning'
        });
        return;
      }

      addSystemUser(this.addUser).then((res) => {
        this.dialogFormVisible = false;
        this.getList();

        this.$message({
          message: '添加成功',
          type: 'success'
        });
      });
    },

    /**
     * 禁用
     */
    deleteItem(id) {
      this.$alert('确定禁用？', '提示').then((res) => {
        userDisable(id).then((res) => {
          this.getList();
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        });
      });
    },

    userEnable(id) {
      this.$alert('确定启用？', '提示').then((res) => {
        userEnable(id).then((res) => {
          this.getList();
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        });
      });
    },

    updateSystemUser() {
      if (!this.addUser.userName) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        });
        return;
      } else if (!this.addUser.roleId) {
        this.$message({
          message: '请选择角色',
          type: 'warning'
        });
        return;
      }

      updateSystemUser(this.addUser).then((res) => {
        this.dialogFormVisible = false;
        this.getList();
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      });
    },

    /** 添加操作 */
    addBut() {
      this.winType = 1;
      this.dialogFormVisible = true;
    },

    /** 修改操作 */
    updateBut(data) {
      this.winType = 2;

      this.addUser.userName = data.userName;
      this.addUser.userId = data.id;
      this.addUser.roleId = data.roles[0] ? data.roles[0].roleId : '';

      this.dialogFormVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.createBut {
  margin-bottom: 20px;
}
</style>
